
<div class="one-btn-data-type">
  <div class="form-container">
    <div class="one-list-inline">查询时间：</div>
    <div class="one-list-inline">
      <form class="form-inline">
        <input type="number" class="form-control" id="statisticYear" style="width:80px;" min="1" [max]="examine.nowYear" [value]="examine.yearData" (change)="changeDate('year')"><span>年</span>第
        <input type="number" class="form-control" style="width:80px;" id="statisticMonth" min="1" [max]="examine.nowMonth"  [value]="examine.monthData" (change)="changeDate('month')"><span>月</span>
        <button type="button" class="btn btn-success" (click)="search()">查询</button>
      </form>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    <div class="one-set-bg one-box-content">
      <div class="one-text-big one-title-bg">空气质量目标<span>{{examine.yearData}}</span>年年度考核</div>
      <div class="one-annualcontent-left">
        <div id="target_chart1" style="width:180px;height: 180px;margin: 0 auto;"></div>
      </div>
      <div class="one-annualcontent-right">
        <div style="height:180px">
          <div class="one-progress-bar-bg">
            <div class="one-progress-bar" [style.height]="examine.yPM10GoalHeight">
              <div class="one-progress-bar-text">
                <p>目标</p>
                <p>{{examine.yPM10Goal}}</p>
              </div>
            </div>
            <div [class]='examine.yPM10Class' [style.height]="examine.yPM10DoneHeight">
              <div class="one-progress-bar-text">
                <p>现状</p>
                <p>{{examine.yPM10Done}}</p>
              </div>
            </div>
            <div class="one-progress-title">PM10</div>
          </div>
          <div class="one-progress-bar-bg">
            <div class="one-progress-bar" [style.height]="examine.yPM25GoalHeight">
              <div class="one-progress-bar-text">
                <p>目标</p>
                <p>{{examine.yPM25Goal}}</p>
              </div>
            </div>
            <div [class]="examine.yPM25Class" [style.height]="examine.yPM25DoneHeight">
              <div class="one-progress-bar-text">
                <p>现状</p>
                <p>{{examine.yPM25Done}}</p>
              </div>
            </div>
            <div class="one-progress-title">PM2.5</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="one-set-bg one-box-content">
      <div class="one-text-big one-title-bg">空气质量目标<span>{{examine.monthData}}</span>月考核</div>
      <div class="one-annualcontent-left">
        <div id="target_chart2" style="width:180px;height: 180px;margin:0 auto;"></div>
      </div>
      <div class="one-annualcontent-right">
        <div style="height:180px">
          <div class="one-progress-bar-bg">
            <div class="one-progress-bar" [style.height]="examine.mPM10GoalHeight">
              <div class="one-progress-bar-text">
                <p>目标</p>
                <p>{{examine.mPM10Goal}}</p>
              </div>
            </div>
            <div [class]="examine.mPM10Class" [style.height]="examine.mPM10DoneHeight">
              <div class="one-progress-bar-text">
                <p>现状</p>
                <p>{{examine.mPM10Done}}</p>
              </div>
            </div>
            <div class="one-progress-title">PM10</div>
          </div>
          <div class="one-progress-bar-bg">
            <div class="one-progress-bar" [style.height]="examine.mPM25GoalHeight">
              <div class="one-progress-bar-text">
                <p>目标</p>
                <p>{{examine.mPM25Goal}}</p>
              </div>
            </div>
            <div [class]="examine.mPM25Class" [style.height]="examine.mPM25DoneHeight">
              <div class="one-progress-bar-text">
                <p>现状</p>
                <p>{{examine.mPM25Done}}</p>
              </div>
            </div>
            <div class="one-progress-title">PM2.5</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="one-btn-tab">
  <div class="btn-group cityBtn">
    <button [ngClass]="{'btn btn-default':true,'active':examine.activeState}" *ngIf="examine.cityName" #cityData (click)="clickFunction('city')">{{examine.cityName}}</button>
    <button [ngClass]="{'btn btn-default':true,'active':!examine.activeState}" *ngIf="examine.areaName" #areaData (click)="clickFunction('area')">{{examine.areaName}}</button>
  </div>
</div>
<div class="row">
  <div class="col-xs-12" id="cityData">
    <div style="padding: 10px;">
      <div style="line-height: 34px;">年度优良天数目标完成情况</div>
      <div id="cityDataFineDayChart" style="width:100%;height:300px;"></div>
    </div>
    <div style="padding: 10px;">
      <div style="line-height: 34px;">年度PM10目标完成情况</div>
      <div id="cityDataPM10Chart" style="width:100%;height:300px;"></div>
    </div>
    <div style="padding: 10px;">
      <div style="line-height: 34px;">年度PM25目标完成情况</div>
      <div id="cityDataPM25Chart" style="width:100%;height:300px;"></div>
    </div>
  </div>
</div>
